<?php #coding: utf-8 æ ø å ?>


	<div style="overflow:auto">

	<?


		

		$efterkommere = $element_data['individ']['boern']; //meningsløs omdøbning (aka. Nor er doven)
		$foraeldrer = $element_data['individ']['foraeldrer'];
		$soeskende = $element_data['individ']['soeskende'];
		//print_r($efterkommere);
		$antal_efterkommere = count($efterkommere);
		$antal_foraeldrer = count($foraeldrer);
			
		$antal_soeskende = count($soeskende);
		//$antal_efterkommere = 7;
		//print_r($soeskende);		
	//print_r($foraeldrer);




	?>
	<script type="application/javascript" language="javascript">
	
	//arrays til javascript: et med efterkommeres navne, og et med deres Id
	var efterkommere=new Array;
	var efterkommerId=new Array;
	<?
	for($i=0;$i<count($efterkommere); $i++){
		echo "efterkommere[$i]='".$efterkommere[$i]['navn']."';\n";
		echo "efterkommerId[$i]='".$efterkommere[$i]['id']."';\n";	
	}			
 	?>
	
	//arrays til javascript: et med forældrernes navne, og et med deres Id
	var foraeldrer=new Array;
	var foraeldrerId=new Array;
	<?
	for($i=0;$i<count($foraeldrer); $i++){
		echo "foraeldrer[$i]='".$foraeldrer[$i]['navn']."';\n";
		echo "foraeldrerId[$i]='".$foraeldrer[$i]['id']."';\n";
	}			
 	?>

	//arrays til javascript: et med søskendes navne, og et med deres Id
	var soeskende=new Array;
	var soeskendeId=new Array;
	<?
	for($i=0;$i<count($soeskende); $i++){
		echo "soeskende[$i]='".$soeskende[$i]['navn']."';\n";
		echo "soeskendeId[$i]='".$soeskende[$i]['id']."';\n";
	}			
 	?>
	
	var antalEfterkommere = "<?= $antal_efterkommere ?>";
	var antalForaeldrer = "<?= $antal_foraeldrer ?>";
	var antalSoeskende = "<?= $antal_soeskende ?>";
	var navn = "<?= $navn ?>";
	var til = navn.search(" ");
	if(til != -1)
	{
		var navn = navn.substring(0,til);
	}
	
/*	//generelt link
	var linkText="http://www.google.com";
	var linkX=5;
	var linkY=15;
	var linkHeight=15;
	var inLink = false;*/


	//her defineres linkarrays til efterkommerlinks
	var linkWidth;
	var linkEfterkommerText=new Array();
	var linkEfterkommerX=new Array();
	var linkEfterkommerY=new Array();
	linkEfterkommerHeight=20;
	var linkEfterkommerWidth=new Array();
	var inLinkEfterkommer=new Array();
	
	//her defineres linkarrays til forældrerlinks
	var linkForaeldreText=new Array();
	var linkForaeldreX=new Array();
	var linkForaeldreY=new Array();
	linkForaeldreHeight=20;
	var linkForaeldreWidth=new Array();
	var inLinkForaeldre=new Array();

	//her defineres linkarrays til soeskendelinks
	var linkSoeskendeText=new Array();
	var linkSoeskendeX=new Array();
	var linkSoeskendeY=new Array();
	linkSoeskendeHeight=20;
	var linkSoeskendeWidth=new Array();
	var inLinkSoeskende=new Array();

	
	window.onload = draw;

		

		function draw () 
		{

			//rekursiv funktion til efterkommere
			function repeat (i,afstand,antalEfterkommere)
			{
				if(i >= 1)
				{
					var fornavn = efterkommere[antalEfterkommere-i];
					var til = fornavn.search(" ");
					if(til != -1)
					{
						var fornavn = fornavn.substring(0,til);
					}
					
					
					cxt.moveTo(25+afstand*(antalEfterkommere-i),80);
					cxt.lineTo(25+afstand*(antalEfterkommere-i),70);
					cxt.stroke();
					
					//øidt: putter indhold i linkarrayet - bortset fra width som først defineres der hvor linket tegnes.
					linkEfterkommerText[i]=fornavn; 
					linkEfterkommerX[i]=25+afstand*(antalEfterkommere-i)
					linkEfterkommerY[i]=60;
					linkEfterkommerWidth[i]=cxt.measureText(linkEfterkommerText[i]).width;
					
					//draw the link
		    		cxt.font='10px sans-serif';
		    		cxt.fillStyle = "#0000ff";
					cxt.textAlign = "center";
		    		cxt.fillText(linkEfterkommerText[i],linkEfterkommerX[i],linkEfterkommerY[i]);
		    		linkWidth=cxt.measureText(linkEfterkommerText[i]).width;

					i = i-1;
					repeat(i,afstand,antalEfterkommere);
				}
				else
				{
					return
				}
			}

			//rekursiv funktion til foraeldrer
			function repeat_foraeldrer (i,afstand,antalForaeldrer)
			{
				if(i >= 1)
				{
					var fornavn = foraeldrer[antalForaeldrer-i];
					var til = fornavn.search(" ");
					if(til != -1)
					{
						var fornavn = fornavn.substring(0,til);
					}
					
					
					cxt.moveTo(70+afstand*(antalForaeldrer-i),320);
					cxt.lineTo(70+afstand*(antalForaeldrer-i),340);
					cxt.stroke();

					//øidt: putter indhold i linkarrayet - bortset fra width som først defineres der hvor linket tegnes.
					linkForaeldreText[i]=fornavn; 
					linkForaeldreX[i]=70+afstand*(antalForaeldrer-i);
					linkForaeldreY[i]=360;
					linkForaeldreWidth[i]=cxt.measureText(linkForaeldreText[i]).width;
					
					//draw the link
		    		cxt.font='10px sans-serif';
		    		cxt.fillStyle = "#0000ff";
		    		cxt.fillText(linkForaeldreText[i],linkForaeldreX[i],linkForaeldreY[i]);
		    		linkWidth=cxt.measureText(linkForaeldreText[i]).width;
				
					i = i-1;
					repeat_foraeldrer(i,afstand,antalForaeldrer);

				}
				else
				{
					return
				}
			}


			var canvas=document.getElementById("tree");
			var cxt=canvas.getContext("2d");
		
			//navn
			cxt.font = "12px monospace";
			cxt.textAlign = "center";
			cxt.fillText(navn, 150,200);  
		
			// Øverste Vandrette linie - Efterkommere horizont
			cxt.moveTo(25,80);
			cxt.lineTo(275,80);
			cxt.stroke();

			if(antalEfterkommere == 1)
			{
			
				var fornavn = efterkommere[0];
				var til = fornavn.search(" ");
				if(til != -1)
				{
					var fornavn = fornavn.substring(0,til);
				}
			
				cxt.moveTo(150,80);
				cxt.lineTo(150,70);
				cxt.stroke();


					//øidt: putter indhold i linkarrayet - bortset fra width som først defineres der hvor linket tegnes.
					linkEfterkommerText[1]=fornavn; 
					linkEfterkommerX[1]=150;
					linkEfterkommerY[1]=60;
					linkEfterkommerWidth[1]=cxt.measureText(linkEfterkommerText[1]).width;
					
					//draw the link
					  		
					cxt.font='10px sans-serif';
		    		cxt.fillStyle = "#0000ff";
					cxt.fillText(linkEfterkommerText[1],linkEfterkommerX[1],linkEfterkommerY[1]);
		    		//cxt.fillText(linkForaeldreText[1],linkForaeldreX[1],linkForaeldreY[1]);
		    		//linkWidth=cxt.measureText(linkForaeldreText[1]).width; 

			}
			else if(antalEfterkommere > 1)
			{
				var afstand = 250 / (antalEfterkommere-1);
		
				repeat(antalEfterkommere,afstand,antalEfterkommere);
				
			}

			// Stamme
			cxt.moveTo(150,80);
			cxt.lineTo(150,188);

			cxt.moveTo(150,203);
			cxt.lineTo(150,320);
			cxt.stroke();


//SØSKENDE
			if(antalSoeskende >= 1)
			{

				var fornavn = soeskende[0];
				var til = fornavn.search(" ");
				if(til != -1)
				{
					var fornavn = fornavn.substring(0,til);
				}

				//øidt: putter indhold i linkarrayet - bortset fra width som først defineres der hvor linket tegnes.
				linkSoeskendeText[1]=fornavn; 
				linkSoeskendeX[1]=65;
				linkSoeskendeY[1]=170;
				linkSoeskendeWidth[1]=cxt.measureText(linkSoeskendeText[1]).width;
					
				//draw the link
					  		
				cxt.font='10px sans-serif';
	    		cxt.fillStyle = "#0000ff";
				cxt.fillText(linkSoeskendeText[1],linkSoeskendeX[1],linkSoeskendeY[1]);
	    		//cxt.fillText(linkForaeldreText[1],linkForaeldreX[1],linkForaeldreY[1]);
	    		//linkWidth=cxt.measureText(linkForaeldreText[1]).width;
			}
			if(antalSoeskende >= 2)
			{

				var fornavn = soeskende[1];
				var til = fornavn.search(" ");
				if(til != -1)
				{
					var fornavn = fornavn.substring(0,til);
				}

				//øidt: putter indhold i linkarrayet - bortset fra width som først defineres der hvor linket tegnes.
				linkSoeskendeText[2]=fornavn; 
				linkSoeskendeX[2]=235;
				linkSoeskendeY[2]=230;
				linkSoeskendeWidth[2]=cxt.measureText(linkSoeskendeText[2]).width;
					
				//draw the link
					  		
				cxt.font='10px sans-serif';
	    		cxt.fillStyle = "#0000ff";
				cxt.fillText(linkSoeskendeText[2],linkSoeskendeX[2],linkSoeskendeY[2]);
	    		//cxt.fillText(linkForaeldreText[1],linkForaeldreX[1],linkForaeldreY[1]);
	    		//linkWidth=cxt.measureText(linkForaeldreText[1]).width;
			}
			if(antalSoeskende > 2)
			{
				cxt.font='10px sans-serif';
	    		cxt.fillStyle = "#0000ff";
				cxt.fillText(navn + " har", 260, 200);
				cxt.fillText("flere søskende!", 260, 210);

			}		

//FORÆLDERER!!!
			
			// Rodnet horizont
			cxt.moveTo(70,320);
			cxt.lineTo(230,320);
			cxt.stroke();
						
			if(antalForaeldrer == 1)
			{
			
				var fornavn = foraeldrer[0];
				var til = fornavn.search(" ");
				if(til != -1)
				{
					var fornavn = fornavn.substring(0,til);
				}
			
				cxt.moveTo(70,320);
				cxt.lineTo(70,340);
				cxt.stroke();

				cxt.moveTo(230,320);
				cxt.lineTo(230,340);
				cxt.stroke();


				
				cxt.font = "20px monospace";
				cxt.textAlign = "center";
				var txt = "?";
				cxt.fillText(txt, 230,360); 

				//LINK
				
					//øidt: putter indhold i linkarrayet - bortset fra width som først defineres der hvor linket tegnes.
					linkForaeldreText[1]=fornavn; 
					linkForaeldreX[1]=70;
					linkForaeldreY[1]=360;
					linkForaeldreWidth[1]=cxt.measureText(linkForaeldreText[1]).width;
					
					//draw the link
					  		
					cxt.font='10px sans-serif';
		    		cxt.fillStyle = "#0000ff";
					cxt.fillText(linkForaeldreText[1],linkForaeldreX[1],linkForaeldreY[1]);
		    		//cxt.fillText(linkForaeldreText[1],linkForaeldreX[1],linkForaeldreY[1]);
		    		//linkWidth=cxt.measureText(linkForaeldreText[1]).width;

			}
			else if(antalForaeldrer > 1)
			{
				var afstand = 160 / (antalForaeldrer-1);
		
				repeat_foraeldrer(antalForaeldrer,afstand,antalForaeldrer);
				
			}
		
			if(antalForaeldrer > 2)
			{
				cxt.font = "12px monospace";
				cxt.textAlign = "center";
				cxt.fillText("-> sense reality warp", 220,380); 
			}
			
	 
		    //add mouse listeners
		    canvas.addEventListener("mousemove", on_mousemove, false);
		    canvas.addEventListener("click", on_click, false);

		}

function on_mousemove (ev){
	
  var x, y;
   // Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX) { //for firefox
  	
    x = ev.layerX;
	
    y = ev.layerY;
	
  }
  //x-=canvas.offsetLeft;
  x=x-85; //xxx hvorfor 130???
  y = y-16 //xxx hvorfor...? 
  //y-=canvas.offsetTop;
 
 
	//is the mouse over the link?
		//loopfunction, der for alle forældrerne tjekker, om curseren er over navnet.
  		for(var j=1;j<linkEfterkommerText.length;j++){
			if(x>=linkEfterkommerX[j] && x <= (linkEfterkommerX[j] + linkEfterkommerWidth[j]) &&
	    	y<=linkEfterkommerY[j] && y>= (linkEfterkommerY[j]-linkEfterkommerHeight)){
		     	document.body.style.cursor = ""; //xxx hvorfor virker den ikke?
		     	inLinkEfterkommer[j]=true;
			}
			else{
				inLinkEfterkommer[j]=false;
			}
		}
		//loopfunction, der for alle forældrerne tjekker, om curseren er over navnet.
  		for(var j=1;j<linkForaeldreText.length;j++){
			if(x>=linkForaeldreX[j] && x <= (linkForaeldreX[j] + linkForaeldreWidth[j]) &&
	    	y<=linkForaeldreY[j] && y>= (linkForaeldreY[j]-linkForaeldreHeight)){
		     	document.body.style.cursor = ""; //xxx hvorfor virker den ikke?
		     	inLinkForaeldre[j]=true;
				
			}
			else{

				inLinkForaeldre[j]=false;
			}
		
		}
		//loopfunction, der for alle søskende tjekker, om curseren er over navnet.
  		for(var j=1;j<linkSoeskendeText.length;j++){
			if(x>=linkSoeskendeX[j] && x <= (linkSoeskendeX[j] + linkSoeskendeWidth[j]) &&
	    	y<=linkSoeskendeY[j] && y>= (linkSoeskendeY[j]-linkSoeskendeHeight)){
		     	document.body.style.cursor = ""; //xxx hvorfor virker den ikke?
				
				inLinkSoeskende[j]=true;
			}
			else{

				inLinkSoeskende[j]=false;
			}
			
		}

  
  
  


  

}


//if the link has been clicked, go to link
function on_click(e) {
	
	for(var j=1;j<linkForaeldreText.length;j++){
		if (inLinkForaeldre[j])  {
  			window.location = "/beta/core/vis/se/individ/" + foraeldrerId[linkForaeldreText.length-j-1] + "/familie";
		}
	}

	for(var j=1;j<linkEfterkommerText.length;j++){
		if (inLinkEfterkommer[j])  {
  			window.location = "/beta/core/vis/se/individ/" + efterkommerId[linkEfterkommerText.length-j-1] + "/familie";
		}
	}

	for(var j=1;j<linkSoeskendeText.length;j++){
		if (inLinkSoeskende[j])  {
  			window.location = "/beta/core/vis/se/individ/" + soeskendeId[j-1] + "/familie";
		}
	}
}
	

	</script>


	<div style="text-align:center;">
		<canvas id="tree" height="400" width="300" style="border:solid 0px black;">
	
	</div>
		</canvas>

</div>


